<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 多列布局</title>
  <style>
   .container {
      display: flex;
      justify-content: space-around;
    }

   .column {
      width: 300px;
      background-color: #f1f1f1;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="column">flex的属性有：1、flex-direction，设置主轴的方向；2、justify-content，设置主轴上的子元素排列方式；3、flex-wrap，设置子元素是否换行；4、align-content，设置侧轴上的所有子元素排列方式；5、align-items ：设置侧轴上子元素自己的排列方式等等。</div>
    <div class="column">flex-basis属性定义了部分在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目本来的大小；\n\n注意：它可以设置根width或height属性一样的值（如200px），则项目将占据固定空间；</div>
    <div class="column">flex-direction属性有4个值\n\nrow（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。\nrow-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。\ncolumn：主轴为垂直方向，起点在上沿（项目从上往下排列）。\ncolumn-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。</div>
  </div>
</body>

</html>